<template>
  <el-popover
    class="express-el-popover"
    placement="bottom"
    width="350"
    trigger="click"
    @show="getMessage">
    <div class="express">
      <div class="express-title">{{expressData.expName}}: {{expressData.number}}</div>
      <div class="express-content">
        <div 
          v-for="(item, index) in expressList" 
          :key="index">

          <template v-if="index === 0">
            <div class="express-content-top">
              <span class="express-icon" :class="{'bcolorD9363E': deliverystatus === $t('task.detail.components.deliveryFail'), 'bcolor13C2C2': deliverystatus === $t('task.detail.components.signedId')}"></span>
              <span class="express-time" :class="{'color13C2C2': deliverystatus === $t('task.detail.components.signedId')}">{{item.time}}</span>
              <span class="express-state" :class="{'color13C2C2': deliverystatus === $t('task.detail.components.signedId')}">{{deliverystatus}}</span>
            </div>
            <div class="express-content-bottom" :class="{'borderD9363E': deliverystatus === $t('task.detail.components.deliveryFail'), 'color13C2C2 border13C2C2': deliverystatus === $t('task.detail.components.signedId')}">
              {{item.status}}
            </div>
          </template>
          <template v-else>
            <div class="express-content-top">
              <span class="express-icon"></span>
              <span class="express-time">{{item.time}}</span>
            </div>
            <div class="express-content-bottom">{{item.status}}</div>
          </template>
        </div>
      </div>
    </div>
    <a class="view-detail-btn" slot="reference">{{this.value}}</a>
  </el-popover>
</template>

<script>

export default {
  name: 'material-logistics-dialog',
  props: {
    value: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
    }
  },
  computed: {
    expressData() {
      return this.data
    },
    expressList() {
      return this.expressData?.list
    },
    deliverystatus() {
      let statusMap = {
        '0': this.$t('task.detail.components.expressDelivery'),
        '1': this.$t('task.detail.components.onTheWay'),
        '2': this.$t('task.detail.components.dispatching'),
        '3': this.$t('task.detail.components.signedId'),
        '4': this.$t('task.detail.components.deliveryFail'),
        '5': this.$t('task.detail.components.difficultPiece'),
        '6': this.$t('task.detail.components.returnedSignIn')
      }
      return statusMap[this.data.deliverystatus]
    }
  },
  methods: {
    getMessage(){
      this.$emit('getMessage', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.express {
  max-height: 350px;
  overflow-y: auto;
  .express-title {
    height: 68px;
    line-height: 68px;
    padding: 0 12px;
    color: #595959;
    border-bottom: 1px solid #F0F0F0;
  }
  .express-content {
    padding: 12px;
    span {
      display: inline-block;
    }
    .express-icon {
      width: 10px;
      height: 10px;
      margin-right: 16px;
      background-color: #BFBFBF;
      border-radius: 50%;
    }
    .express-time {
      margin-right: 16px;
      color: #8C8C8C;
    }
    .express-state {
      color: #262626;
      font-weight: bold;
    }
    .express-content-bottom {
      margin-left: 4px;
      padding: 10px 20px 10px;
      color: #262626;
      border-left: 1px solid #BFBFBF;
    }
    .bcolorD9363E{
      background-color: #D9363E;
    }
    .bcolor13C2C2{
      background-color: $color-primary-light-6;
    }
    .colorD9363E{
      color: #D9363E;
    }
    .color13C2C2{
      color: $color-primary-light-6;
    }
    .borderD9363E{
      border-left: 1px solid #D9363E;
    }
    .border13C2C2{
      border-left: 1px solid $color-primary-light-6;
    }

  }
}
</style>
<style lang="scss" scoped>
.el-popover {
  padding: 0;
}
</style>